<template>
  <div class="paren">
    <div class="chart-container">
      <div class="border1">
        <!-- <div class="text1" :style="{'width':isCollapse?'48%':'55%'}">
          <ModelFaultPie />
        </div> -->
        <div class="text1" :style="{'width':isCollapse?'97%':'100%'}">
          <ModelFaultBar />
        </div>
      </div>
      <div class="border1">
        <div class="text1" :style="{'width':isCollapse?'48%':'55%'}">
          <LocationFault />
        </div>
        <div class="text1" :style="{'width':isCollapse?'48%':'55%'}">
          <CauseFault />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import LocationFault from '../chart/LocationFault.vue';
  import ModelFaultBar from '../chart/ModelFaultBar.vue';
  import CauseFault from '../chart/CauseFault.vue';
  import { useSidebarStore } from '../../store/sidebarStore';
  import { computed } from 'vue';

  const sidebarStore = useSidebarStore();
  const isCollapse = computed(() => sidebarStore.isCollapse);
</script>

<style scoped>
  .paren {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding-bottom: 300px;
    background-color: white;
    color: black;
  }
  
  .chart-container {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
  }
  .border1 {
    display: flex;
    height: 500px;
    margin-bottom: 150px;
  }
  .text1 {
    height: 500px;
    margin-right: 20px;
  }
</style>